<template>
  <div class="shelf-item-category">
    <div class="shelf-item-category-list" v-if="data.itemList.length > 0">
      <div class="shelf-item-category-item" v-for="(item, index) of data.itemList" :key="index">
        <img class="shelf-item-category-img" :src="item.cover">
      </div>
    </div>
    <div class="shelf-item-category-bg" v-else>
      <span class="iconfont">&#xe713;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShelfItemCategory',
  props: {
    data: Object
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .shelf-item-category
    width: 100%
    height: 100%
    overflow: hidden
    .shelf-item-category-list
      display: flex
      flex-flow: row wrap
      // 这句话表示如果下面内容为空时候，显示为靠顶部居左显示
      align-content: flex-start
      width: 100%
      height: 100%
      padding-top: px2rem(5)
      box-sizing: border-box
      .shelf-item-category-item
        flex: 0 0 33.33%
        width: 33.33%
        height: 33.33%
        box-sizing: border-box
        &:nth-child(3n+1)
          padding: 0 px2rem(2.5) px2rem(5) px2rem(5)
        &:nth-child(3n+2)
          padding: 0 px2rem(2.5) px2rem(5) px2rem(2.5)
        &:nth-child(3n+3)
          padding: 0 px2rem(5) px2rem(5) px2rem(2.5)
        .shelf-item-category-img
          width: 100%
          height: 100%
    .shelf-item-category-bg
      width: 100%
      height: 100%
      background: white
      font-size: px2rem(30)
      color: #ccc
      center()
</style>
